<template lang="html">
  <div class="art-list">
    <ul class="list">
      <router-link tag="li" :to="{name:'MusicPlay',params:{songId:item.id}}" class="song" v-for="(item,index) in songsArr" :key="index">
        <div class="left">
          {{ item.name }}
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "artlist",
  data() {
    return {
      songsArr: []
    };
  },
  mounted() {
    const songsUrl = this.HOST +`/artist/songs?id=${this.$route.params.singerId}&order=hot&limit=15`;
    this.$axios.get(songsUrl).then(res => {
        this.songsArr = res.data.songs;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<style scoped>
.art-list {
  padding: 0 17px;
  background-color: rgb(238, 240, 239);
}

.song {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgb(63, 128, 122);
}
.left {
  font-size: 18;
}
</style>
